<template>
  <div id="apptb">
    <div class="grouptitle">
      <div class="grouptitletext">团队信息</div>
    </div>

    <div class="contentall">
      <div class="contentallcontent">
        <div class="contentss">
          <div class="inputall">
            <div class="inputleft">
              <label for="">队伍名称</label>
              <input type="text" class="inputtextte" v-model="teamInfo.teamname" />
            </div>
            <div class="inputright">
              <label for="">队伍简称</label>
              <input type="text" class="inputtextte" v-model="teamInfo.teamabbreviation" />
            </div>
          </div>
          <!--  -->
          <div class="inputall">
            <div class="inputleft">
              <label for="">负责人</label>
              <input type="text" class="inputtextte" v-model="teamInfo.teamleader" />
            </div>
          </div>

          <div class="inputall">
            <div class="inputleft">
              <label for="">省份</label>
              <select id="province" class="inputtextte" @click="getcitylist" v-model="sf">
                <option value="" style="display: none">请选择</option>
                <option v-for="item in ProvinceList" :key="item.id" :value="item">
                  {{ item.provincename }}
                </option>
              </select>
            </div>
            <div class="inputright">
              <label for="">市区</label>
              <select id="city" class="inputtextte" v-model="teamInfo.citylevel">
                <option value="" style="display: none">请选择</option>
                <option :value="item.cityname" v-for="item in CityList" :key="item.id">
                  {{ item.cityname }}
                </option>
              </select>
            </div>
          </div>
          <div class="inputall">
            <div class="inputleft">
              <label for="">地址</label>
              <input type="text" class="inputtextte" id="xqdzipt" style="width: 538px" v-model="teamInfo.address" />
            </div>
          </div>
          <div class="inputall">
            <div class="inputright">
              <label for="">手机号码</label>
              <input type="text" class="inputtextte" v-model="teamInfo.phone" />
            </div>
          </div>
          <div class="inputall">
            <div class="inputleft">
              <label for="">E-Mall</label>
              <input type="text" class="inputtextte" v-model="teamInfo.email" />
            </div>
          </div>

          <div class="inputall" id="ipumew" @click="submitall">
            <div class="bottomimg" id="btnww">
              <!-- <img :src="'http://localhost:3002/upload/add.png'" alt="" /> -->
              <i class="el-icon-circle-plus-outline iconsel"></i>
              <span>保存</span>
            </div>
            <div class="bottomimg">
              <!-- <img :src="'http://localhost:3002/upload/add.png'" alt="" /> -->
              <i class="el-icon-right iconsel"></i>
              <span>下一步</span>
            </div>
          </div>
        </div>

        <div class="bottombox"></div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data: function () {
    return {
      ProvinceList: [], // 省份列表
      CityList: [], // 市区列表
      userInfo: {},
      teamInfo: {
        teamname: "", // 团队名称
        teamabbreviation: "", // 团队简称
        provinciallevel: "", // 省
        citylevel: "", // 市
        address: "", // 详细地址
        teamleader: "", // 团队负责人
        phone: "", // 手机号码
        email: "",
        userid: 0
      },
      sf: "",
      errorMessages: [], // 用于收集错误消息的数组
    };
  },
  methods: {
    getcitylist() {
      axios({
        method: "post",
        url: "http://localhost:3002/competition/city/getByid",
        data: { provinceid: this.sf.provinceid },
      }).then((res) => {
        this.CityList = res.data.list;
      });
      this.teamInfo.provinciallevel = this.sf.provincename;
    },

    getprovincelist() {
      axios({
        method: "post",
        url: "http://localhost:3002/competition/province/list",
      }).then((res) => {
        this.ProvinceList = res.data.list;
      });
    },

    // 验证：邮箱、电话号码
    validateTeamInfo() {
      // 验证所有字段是否非空
      if (
        this.teamInfo.teamname == "" ||
        this.teamInfo.teamabbreviation == "" ||
        this.teamInfo.provinciallevel == "" ||
        this.teamInfo.citylevel == "" ||
        this.teamInfo.address == "" ||
        this.teamInfo.teamleader == "" ||
        this.teamInfo.phone == "" ||
        this.teamInfo.email == ""
      ) {
        this.$message({
          message: "请将信息填写完整",
          type: "error",
        });
        return;
      }

      // 验证手机号码是否为11位纯数字
      const isValidPhone = /^\d{11}$/.test(this.teamInfo.phone.trim());
      if (!isValidPhone) {
        this.$message({
          message: "手机号需11位数字",
          type: "error",
        });
        return;
      }

      // 验证电子邮件是否包含@符号
      const isValidEmail = this.teamInfo.email.trim().includes("@");
      if (!isValidEmail) {
        this.$message({
          message: "E-Mall请填写正确",
          type: "error",
        });
        return;
      }

      return true;
    },

    // 保存下一步
    submitall() {
      if (!this.validateTeamInfo()) return;

      axios({
        method: "post",
        url: "http://localhost:3002/competition/team/add",
        data: {
          teamname: this.teamInfo.teamname,
          teamabbreviation: this.teamInfo.teamabbreviation,
          provinciallevel: this.teamInfo.provinciallevel,
          citylevel: this.teamInfo.citylevel,
          address: this.teamInfo.address,
          teamleader: this.teamInfo.teamleader,
          phone: this.teamInfo.phone,
          email: this.teamInfo.email,
          userid: this.userInfo.id
        },
      }).then((res) => {
        if (res.data.success) {
          this.teamInfo.id = res.data.data.id
          this.teamInfo.userid = this.userInfo.id
          let teaminfo = this.teamInfo;
          localStorage.setItem("teaminfo", JSON.stringify(teaminfo));
          this.$message({
            message: "添加成功",
            type: "success",
          });
        } else {
          console.log("添加错误");
        }

      });

      this.$emit("custom-event");
    },
  },
  mounted() {
    this.getprovincelist();
    this.userInfo = JSON.parse(localStorage.getItem("userInfo"));
    console.log(this.userInfo)
  },
};
</script>

<style lang="less" scoped>
#apptb {
  background-color: #7c7e7c;
  width: 60%;
  height: 600px;
  margin-top: 10px;

  .grouptitle {
    width: 100%;
    height: 45px;
    // background: linear-gradient(#e8d78f, #b19213);
    color: white;
    letter-spacing: 2px;

    // display: flex;
    // justify-content: center; /* 水平居中 */
    // align-items: center; /* 垂直居中 */
    .grouptitletext {
      display: inline-block;
      margin: 10px 20px;
    }
  }

  .iconsel {
    margin-right: 10px;
  }

  .contentall {
    background-color: #7c7e7c;
    width: 100%;
    height: 100%;
    padding-top: 6px;

    .contentallcontent {
      width: 98.5%;
      height: 99%;
      background-color: rgb(237, 239, 233);
      margin: 0 6px;
      border-radius: 10px;
      position: relative;

      .contentss {
        width: 98%;
        // height: 80%;
        margin: 0 10px;
        background-color: #eef7ff;
        transform: translateY(3%);
        border: 1px solid rgb(206, 200, 200);

        // 每一行
        .inputall {
          background-color: #f4f6f8;
          margin: 0px 6px;
          height: 40px;
          font-size: 15px;
          border-bottom: 1px solid rgb(206, 200, 200);
          display: flex;
          align-items: center;
          /* 垂直居中 */

          select {
            height: 25px;
            width: 227px !important;
          }

          .bottomimg {
            display: flex;
            align-items: center;
            /* 垂直居中 */
            // transform: translateX(720%);
            background: linear-gradient(#f6f6f6, #e1e1e1);
            padding: 4px 10px;
            border-radius: 5px;
            border: 1px solid rgb(174, 171, 171);

            img {
              width: 20px;
              height: 20px;
              margin-right: 8px;
            }
          }

          #btnww {
            // transform: translateX(640px);
            // margin-left: 520px;
          }

          .inputleft {
            display: inline-block;
            vertical-align: top;
            padding: 0 6px;

            .xqdzipt {
              display: inline-block;
              width: 400px !important;
            }

            label {
              //   padding-right: 5px;
              display: inline-block;
              //   background-color: red;
              width: 80px;
              text-align: center;
            }

            .inputtextte {
              width: 220px;
            }
          }

          .inputright {
            display: inline-block;
            vertical-align: top;
            margin-left: 5px;

            label {
              //   padding-right: 5px;
              display: inline-block;
              //   background-color: red;
              width: 80px;
              text-align: center;
            }

            .inputtextte {
              width: 220px;
            }
          }
        }
      }

      .bottombox {
        background-color: #eff2f5;
        width: 100%;
        height: 38px;
        // transform: translateY(230%);
        position: absolute;
        bottom: 0;
      }
    }
  }
}

#ipumew {
  // margin-left: 120px !important;
  display: flex;
  justify-content: flex-end;

  .bottomimg {
    margin-right: 20px !important;
  }
}
</style>